<template>
	<view>
		<scroll-view :scroll-top="scrollValue" @scroll="scroll" scroll-y="true" :enable-flex="true">
			<view class="car-box" :key="key">
				<view class="msg">
					<view class="car-number"  v-if="show">
						<uni-data-select v-model="vehicle.id" :localdata="vehicleList" @change="change"
							:clear="false"></uni-data-select>
					</view>
					<view> <span>最后里程数：{{vehicle.currentKm}} KM</span></view>
					<view> <span>保险到期：{{vehicle.insuranceExpireTime}}</span></view>
					<view> <span>保险电话：{{vehicle.insurancePhone}}</span></view>
					<view> <span>保险公司：{{vehicle.insuranceCompany}}</span></view>
					<view> <span>年检到期：{{vehicle.checkExpireTime}}</span></view>
				</view>
				<view class="btn">
					<view @click="repair"><uni-icons custom-prefix="iconfont" type="icon-weixiu-xiuche" size="20"
							color="#ffffff"></uni-icons>维修</view>
					<view @click="maintain"><uni-icons custom-prefix="iconfont" type="icon-baoyang" size="20"
							color="#ffffff"></uni-icons>保养</view>
				</view>
				<view class="list" v-if="lastRepair">
					<view class="title">上次维修</view>
					<view class="date"><span>上次维修日期：</span><span>{{lastRepair.serviceTime}}</span></view>
					<view class="date"><span>上次维修里程数：</span><span>{{lastRepair.currentKm}} KM</span></view>
					<view class="date"><span>执行人：</span><span>{{lastRepair.createName}}</span></view>
					<view class="detail">
						<view>维修明细</view>
					</view>
					<view class="item" v-for="(item,index) in lastRepair.vehicleServiceItemList" :key="index">
						<view><span>{{item.name}}</span><span>¥{{item.price}}</span></view>
					</view>
					<view class="total">
						<view><span>合计</span><span>￥{{lastRepair.total}}</span></view>
					</view>
				</view>
				<view class="list" v-if="lastMaintain">
					<view class="title">上次保养</view>
					<view class="date"><span>上次保养日期：</span><span>{{lastMaintain.serviceTime}}</span></view>
					<view class="date"><span>上次保养里程数：</span><span>{{lastMaintain.currentKm}} KM</span></view>
					<view class="date"><span>执行人：</span><span>{{lastMaintain.createName}}</span></view>
					<view class="detail">
						<view>保养明细</view>
					</view>
					<view class="item" v-for="(item,index) in lastMaintain.vehicleServiceItemList" :key="index">
						<view><span>{{item.name}}</span><span>¥{{item.price}}</span></view>
					</view>
					<view class="total">
						<view><span>合计</span><span>￥{{lastMaintain.total}}</span></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<back-to-top :goTop="goTop"></back-to-top>
	</view>
</template>

<script>
	import * as API from '@/common/api';
	export default {

		name: "pages-materialPackage-cars",
		data() {
			return {
				key: 0,
				vehicle: {},
				vehicleList: [],
				show: false,
				scrollValue: 0,
				oldScrollValue: 0,
				lastMaintain: null,
				lastRepair: null
			};
		},
		async mounted() {
			await this.listAllVehicle();
		},
		methods: {

			scroll: function(e) {
				this.oldScrollValue = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollValue = this.oldScrollValue
				this.$nextTick(function() {
					this.scrollValue = 0
				});
			},
			maintain() {
				if (this.vehicle) {
					uni.navigateTo({
						url: '/pages/materialPackage/carRepair?type=保养&vehicleId=' + this.vehicle.id
					})
				}

			},
			repair() {
				if (this.vehicle) {
					uni.navigateTo({
						url: '/pages/materialPackage/carRepair?type=维修&vehicleId=' + this.vehicle.id
					})
				}

			},
			async change(e) {
				if (e) {
					const res = await API.getVehicleById(e);
					this.vehicle = res.data;
					await this.getVehicleLastRepair();
					await this.getVehicleLastMaintain();
					this.key++;
				}


			},
			async refresh() {
				if (this.vehicle && this.vehicle.id) {
					await this.change(this.vehicle.id);
				} else {
					if (this.vehicleList.length == 0) {
						await this.listAllVehicle();
					} 
					await this.change(this.vehicleList[0].value);

				}

			},
			async listAllVehicle() {
				this.show=false;
				const res = await API.listAllVehicle();
				this.vehicleList = res.rows.map(item => {
					return {
						value: item.id,
						text: item.carCodeNumber
					}
				})
				this.show=true;
				


			},
			async getVehicleLastRepair() {

				const res = await API.getVehicleLastService({
					params: {
						vehicleId: this.vehicle.id,
						carCodeNumber: this.vehicle.carCodeNumber,
						serviceType: '0'
					}
				})
				this.lastRepair = res.data;
				if (this.lastRepair) {
					let sum = Number(0);
					this.lastRepair.vehicleServiceItemList.forEach(item => {
						sum += Number(item.price);
					})
					this.lastRepair.total = sum.toFixed(2);
				}
			},
			async getVehicleLastMaintain() {

				const res = await API.getVehicleLastService({
					params: {
						vehicleId: this.vehicle.id,
						carCodeNumber: this.vehicle.carCodeNumber,
						serviceType: '1'
					}
				})
				this.lastMaintain = res.data;
				if (this.lastMaintain) {
					let sum = Number(0);
					this.lastMaintain.vehicleServiceItemList.forEach(item => {
						sum += Number(item.price);
					})
					this.lastMaintain.total = sum.toFixed(2);
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.car-box {
		width: 90vw;
		height: 82vh;
		padding-top: 10rpx;
		box-sizing: border-box;

		.msg {
			background-color: #fff;
			border-radius: 8px;
			margin-bottom: 10px;
			padding: 10px;
			background-image: url('../../static/icons/bgCar1.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: top right;

			.car-number {
				width: 120px;
				height: 35px;
				border: 2px solid #3351EC;
				border-radius: 6px;
				margin-bottom: 10px;

				/deep/ .uni-select {
					background-color: #3250EC !important;
					font-size: 14px !important;
					font-weight: 600 !important;
				}

				/deep/ .uni-select__input-text {
					color: #fff;
				}

				/deep/ .uniui-bottom::before {
					color: #FFF;
					font-weight: 600;
				}

				/deep/ .uniui-top::before {
					color: #FFF;
					font-weight: 600;
				}
			}

			span {
				color: #989898;
				font-size: 13px;
			}
		}

		.btn {
			margin-bottom: 10px;
			display: flex;
			gap: 10%;
			height: 40px;

			view {
				background-color: #3250EC;
				width: 45%;
				border: 2px solid #ffffff;
				border-radius: 4px;
				color: #ffffff;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 5px;
			}
		}

		.list {
			background-color: #fff;
			border-radius: 8px;
			margin-bottom: 10px;
			padding: 10px;

			.title {
				font-weight: 600;
				font-size: 14px;
				margin-bottom: 5px;
			}

			.date {
				font-size: 13px;
				color: #989898;
			}

			.detail {
				margin-top: 10px;
				border-radius: 6px 6px 0px 0px;
				background-color: #f8f9ff;
				width: calc(95% - 2px);
				padding: 0 2.5% 2.5%;
				font-size: 14px;
				color: #989898;
				border-left: 1px solid #eceef7;
				border-right: 1px solid #eceef7;
				border-top: 1px solid #eceef7;

				view {
					height: 40px;
					color: #2E49E8;
					font-size: 14px;
					line-height: 40px;
					border-bottom: 1px dashed #C4CAE7;
				}
			}

			.item {
				background-color: #f8f9ff;
				width: calc(95% - 2px);
				padding: 0 2.5% 2.5%;
				font-size: 14px;
				color: #989898;
				border-left: 1px solid #eceef7;
				border-right: 1px solid #eceef7;

				view {
					span:nth-of-type(2) {
						float: right;
						color: #000;
					}
				}
			}

			.total {
				font-size: 14px;
				width: calc(95% - 2px);
				padding: 0 2.5% 2.5%;
				background-color: #f3f4fa;
				border-radius: 0px 0px 6px 6px;
				border: 1px solid #EBECF2;

				view {
					display: flex;
					gap: 15px;
					justify-content: flex-end;
				}
			}
		}
	}
</style>